<template>
  <section class="business-section">
    <h2 class="title">我们的业务</h2>
    <div class="cards">
      <div class="card">
        <img src="@/assets/OurService1.jpg" alt="Icon">
        <h3>清洁保养</h3>
        <p>又快又好</p>
        <div class="card-actions">
          <router-link to="/service1/7">家庭保洁</router-link>
          <router-link to="/service1/8">企业保洁</router-link>
          <router-link to="/service1/9">家电清洗</router-link>
          <router-link to="/service1/10">家居精护</router-link>
        </div>
      </div>
      <div class="card">
        <img src="@/assets/OurService2.jpg" alt="Icon">
        <h3>疏通维修</h3>
        <p>您最好的维修团队</p>
        <div class="card-actions">
          <router-link to="/service1/11">管道疏通</router-link>
          <router-link to="/service1/12">综合维修</router-link>
          <router-link to="/service1/13">拆装服务</router-link>
          <router-link to="/service1/14">装潢修补</router-link>
        </div>
      </div>
      <div class="card">
        <img src="@/assets/OurService3.jpg" alt="Icon">
        <h3>搬家搬场</h3>
        <p>专业搬运工为您服务</p>
        <div class="card-actions">
          <router-link to="/service1/15"></router-link>
          <router-link to="/service1/17">搬家搬场</router-link>
          <router-link to="/service1/16"></router-link>
        </div>
      </div>
      <div class="card">
        <img src="@/assets/OurService4.jpg" alt="Icon">
        <h3>家务管家</h3>
        <p>您最贴心的家务帮手</p>
        <div class="card-actions">
          <router-link to="/smart-manufacturing/detail"></router-link>
          <router-link to="/service1/18">家务管家</router-link>
          <router-link to="/smart-manufacturing/detail"></router-link>
        </div>
      </div>
      <div class="card">
        <img src="@/assets/OurService5.jpg" alt="Icon">
        <h3>母婴护理</h3>
        <p>多种护理方案任您选择</p>
        <div class="card-actions">
          <router-link to="/smart-manufacturing/detail"></router-link>
          <router-link to="/service1/19">母婴护理</router-link>
          <router-link to="/smart-manufacturing/detail"></router-link>
        </div>
      </div>
      <div class="card">
        <img src="@/assets/OurService6.jpg" alt="Icon">
        <h3>健康与养老</h3>
        <p>您的私人养老团队</p>
        <div class="card-actions">
          <router-link to="/smart-manufacturing/detail"></router-link>
          <router-link to="/service1/20">健康</router-link>
          <router-link to="/service1/21">养老</router-link>
          <router-link to="/smart-manufacturing/detail"></router-link>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>.business-section {
  padding: 60px 20px;
  background-color: #FAF9DE;
  text-align: center;
}
.title{
  text-align: left;
  border-left: 20px solid #1abc9c;
  margin-left: 300px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  margin-top: 50px;
}

.card {
  background-color: #C7EDCC;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}
</style>
<style scoped>.card-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;

}

.card-actions button {
  flex: 1;
  padding: 6px 8px;
  border: none;
  background-color: #1abc9c;
  color: white;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.card-actions button:hover {
  background-color: #16a085;
}
.card-actions a {
  text-decoration: none;
  color: #1abc9c;
  margin: 0 5px;
  font-size: 0.85rem;
  transition: color 0.3s ease;
}

.card-actions a:hover {
  color: #16a085;

}
</style>
<script setup lang="ts">
</script>